<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor2 test</title>
    <link rel="stylesheet" type="text/css" href="../dist/css/wangEditor.min.css">
    <style type="text/css">
        #div1 {
            width: 100%;
            height: 300px;
        }
        .container {
            position: relative;
        }

        .wangEditor-container .wangEditor-txt blockquote {
          display: block;
          border: 1px solid #003399;
          border-left: 8px solid #003399;
          padding: 5px 10px;
          margin: 10px 0;
          line-height: 1.4;
          font-size: 100%;
          background-color: #fff;
        }
        .wangEditor-container .wangEditor-txt table {
          border: none;
          border-collapse: collapse;
        }
        .wangEditor-container .wangEditor-txt table td,
        .wangEditor-container .wangEditor-txt table th {
          border: 1px solid #003399;
          padding: 3px 5px;
          min-width: 50px;
          height: 20px;
        }
        .wangEditor-container .wangEditor-txt pre {
          border: 1px solid #003399;
          background-color: #fff;
          padding: 10px;
          margin: 5px 0px;
          font-size: 0.8em;
          border-radius: 3px;
        }

    </style>
</head>
<body style="padding:0 20px;">
    <p>wangEditor2.0.0 自定义编辑区域内容的样式</p>
    <div class="container">
        <div id="div1">
        <!-- <textarea id="div1"> -->
            <h3>标题标题1</h3>
            <blockquote><p>请输入内容222</p></blockquote>            
            <p><a href="#">链接链接</a></p>
            <pre style="max-width:100%;overflow-x:auto;"><code>var a = 'a';
var b = 'b';</code></pre>
            <p>请输入内容</p>
            
            <table>
                <tr>
                    <td>#</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>zhang</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>wang</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>lee</td>
                    <td>40</td>
                </tr>
            </table>
        <!-- </textarea> -->
        </div>
    </div>
    <p>底部test</p>
    
    
    <script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../dist/js/wangEditor.js"></script>
    <script type="text/javascript">
        $(function () {
            var editor = new wangEditor('div1');
            editor.create();
        });
    </script>
</body>
</html>